<template>
  <!-- 新增客观题 -->
  <div class="objsubMain">
    <div class="objsubContent">
      <h3>批量编辑客观题</h3>
      <div style="display: flex">
        <div class="plbj" v-if="plbjShow">
          <el-form label-width="auto" style="height: 500px">
            <el-form-item label="起止题号">
              <el-input
                v-model="plbjForm.qzth"
                placeholder="以 ' - ' 分隔，例（1-10）"
              ></el-input>
            </el-form-item>
            <el-form-item label="固定题号">
              <el-input
                v-model="plbjForm.gdth"
                placeholder="以英文 ' , ' 分隔"
              ></el-input>
            </el-form-item>
            <el-form-item label="设置满分">
              <el-input v-model="plbjForm.fullScore"></el-input>
            </el-form-item>
            <el-form-item label="设置题型">
              <el-select
                v-model="plbjForm.basicQuestionTypeId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in questiontypelist"
                  :key="item.id"
                  :label="item.questionName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <el-button
            type="primary"
            style="
              width: 130px;
              height: 50px;
              margin-top: 20px;
              font-size: 16px;
            "
            @click="plbjbc"
            >应用</el-button
          >
        </div>
        <div class="gundongtiaotable">
          <el-table
            ref="multipleTable1"
            :data="objectivelistdata"
            tooltip-effect="dark"
            border
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange1"
            :header-cell-style="{
              background: '#D8E4F0',
              color: '#2A303B',
              fontWeight: '500',
            }"
            :height="500"
          >
            <el-table-column label="题号编号" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.questionNumber"
                  @input="scope.row._isModified = true"
                  placeholder=""
                  class="fxwidth3"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="题型" width="120" align="center">
              <template slot-scope="scope">
                <!-- @change="scope.row._isModified = true" -->
                <el-select
                  v-model="scope.row.basicQuestionTypeId"
                  placeholder="请选择"
                  class="selectbox fxwidth4"
                  @change="scope.row._isModified = true"
                >
                  <el-option
                    v-for="item in questiontypelist"
                    :key="item.id"
                    :label="item.questionName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="选项数" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.optionCount"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  placeholder=""
                  class="fxwidth3"
                  @input="scope.row._isModified = true"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="方向" width="120" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.direction"
                  placeholder="请选择"
                  class="selectbox fxwidth4"
                  @change="scope.row._isModified = true"
                >
                  <el-option
                    v-for="item in questionclassifylist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="满分" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fullScore"
                  placeholder=""
                  class="fxwidth3"
                  @input="scope.row._isModified = true"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteobjquestion(scope.row.id, scope.$index)"
                    style="display: flex; align-items: center; color: #ec555a"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="addquestionstbutton">
            <el-button @click="plbj">批量编辑</el-button>
            <el-button
              style="margin-left: auto"
              @click="editobjectivequestionssurebc"
              >保存</el-button
            >
            <el-button @click="editobjectivequestionsgoback">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  addobjectquestion,
  batchdeleteobjetive,
} from "../../api/paperinfo/paperinfo.js";
export default {
  props: ["objectivelistdata", "questiontypelist"],
  data() {
    return {
      addobjquestion: {
        startNum: "",
        endNum: "",
        fixednum: "",
        questiontype: "",
        optiondirection: "",
        fullscore: "",
      },
      objquestionlist: [],
      questionclassifylist: [
        { label: "横向", value: 1 },
        { label: "纵向", value: 2 },
      ],
      ontinuousnum: "1",

      plbjShow: false,
      plbjForm: {
        qzth: "",
        gdth: "",
        fullScore: "",
        basicQuestionTypeId: "",
      },
    };
  },
  methods: {
    validateFixedNumInput() {
      // 只允许数字和逗号，并自动过滤非法字符
      // this.addobjquestion.fixedNum = this.addobjquestion.fixedNum.replace(/[^\d,]/g, '');

      // 可选：禁止连续逗号（如 `1,,2` → `1,2`）
      // this.addobjquestion.fixedNum = this.addobjquestion.fixedNum.replace(/,+/g, ',');

      // 可选：去除开头或结尾的逗号（如 `,1,2,` → `1,2`）
      this.addobjquestion.fixedNum = this.addobjquestion.fixedNum.replace(
        /^,|,$/g,
        ""
      );
    },
    //添加试题
    addquestionbox() {
      // 校验题号
      if (this.ontinuousnum == 1) {
        if (!this.addobjquestion.startNum || !this.addobjquestion.endNum) {
          this.$message.error("请填写起止题号");
          return;
        }
        if (
          parseInt(this.addobjquestion.startNum) >
          parseInt(this.addobjquestion.endNum)
        ) {
          this.$message.error("起始题号不能大于结束题号");
          return;
        }
      } else if (this.ontinuousnum == 2) {
        if (!this.addobjquestion.fixedNum) {
          this.$message.error("请填写固定题号");
          return;
        }
        // 检查固定题号格式
        if (!/^\d+(,\d+)*$/.test(this.addobjquestion.fixedNum)) {
          this.$message.error("固定题号格式不正确，请使用逗号分隔数字");
          return;
        }
      }

      // 校验试题题型
      if (!this.addobjquestion.questiontype) {
        this.$message.error("请选择试题题型");
        return;
      }

      // 校验选项方向
      if (!this.addobjquestion.optiondirection) {
        this.$message.error("请选择选项方向");
        return;
      }

      // 校验选项数量
      if (!this.addobjquestion.optionsNum) {
        this.$message.error("请填写选项数量");
        return;
      }

      // 校验满分分值
      if (!this.addobjquestion.fullscore) {
        this.$message.error("请填写满分分值");
        return;
      }
      let questionNumbers = [];
      if (this.addobjquestion.startNum && this.addobjquestion.endNum) {
        // alert('1111')
        const startNum = parseInt(this.addobjquestion.startNum);
        const endNum = parseInt(this.addobjquestion.endNum);
        for (let i = startNum; i <= endNum; i++) {
          questionNumbers.push(i.toString());
        }
      }
      if (this.addobjquestion.fixedNum) {
        // alert('2222')
        questionNumbers = this.addobjquestion.fixedNum
          .split(",")
          .map((num) => num.trim());
      }
      let chunkSize = 1;
      for (let i = 0; i < questionNumbers.length; i += chunkSize) {
        const chunk = questionNumbers.slice(i, i + chunkSize);

        this.objquestionlist.push({
          examId: parseInt(this.$route.query.templateId),
          questionNumber: chunk[0],
          basicQuestionTypeId: this.addobjquestion.questiontype, // 题型数组
          direction: parseInt(this.addobjquestion.optiondirection), // 选项方向数组
          optionCount: parseInt(this.addobjquestion.optionsNum), // 选项数量
          fullScore: parseInt(this.addobjquestion.fullscore), // 满分分值
        });
      }
      console.info(this.objquestionlist);
      this.addobjquestion = {
        startNum: "",
        endNum: "",
        fixednum: "",
        questiontype: "",
        optiondirection: "",
        fullscore: "",
      };
    },
    // 删除客观题行
    deleteobjquestion(id, index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchdeleteobjetive([id]).then((res) => {
            if (res.code == 200) {
              this.objectivelistdata.splice(index, 1);
              // this.$emit('updateobjectivequestionssurebc', 1)
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 格式化输入值
    formatInputValue(value) {
      return value === 0 ? "" : value;
    },
    onlyLetters(value) {
      return value.replace(/[^a-zA-Z,]/g, "");
    },
    onlyNumber(value) {
      return value.replace(/[^0-9.]/g, "");
    },
    onlyzzNumber(value) {
      return value.replace(/[^0-9]/g, "");
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    cancelobj() {
      this.$emit("closeobjective", 0);
    },
    editobjectivequestionssurebc() {
      const modifiedData = this.objectivelistdata.filter(
        (row) => row._isModified
      );
      if (modifiedData.length === 0) {
        this.$message.warning("没有修改的数据！");
        return;
      }
      // let bojlist = modifiedData.map(item => {
      //   return {
      //     examId: item.examId,
      //     id: item.id,
      //     questionNumber: item.questionNumber,
      //     basicQuestionTypeId: item.basicQuestionTypeId,  // 确保字段名正确（可能是 item.basicQuestionTypeId？）
      //     direction: item.direction,        // 确保字段名正确（可能是 item.direction？）
      //     optionCount: item.optionCount,  // 修正 parseInt 写法
      //     fullScore: item.fullScore      // 修正 parseInt 写法
      //   };
      // });
      addobjectquestion(modifiedData).then((res) => {
        if ((res.code = 200)) {
          this.$emit("updateobjectivequestionssurebc", 1);
        } else {
          this.$message({
            type: "warning",
            message: "保存失败!",
          });
        }
      });
    },
    editobjectivequestionsgoback() {
      this.$emit("updateobjectivequestionssurebc", 0);
    },

    plbj() {
      this.plbjForm = {
        qzth: "",
        gdth: "",
        fullScore: "",
        basicQuestionTypeId: "",
      };
      this.plbjShow = !this.plbjShow;
    },
    plbjbc() {
      if (this.plbjForm.qzth) {
        if (!/^\d+(\.\d)?$/.test(this.plbjForm.fullScore)) {
          this.$modal.alertError("设置满分格式错误");
          return;
        }
        const reg = /^\d+-\d+$/;
        if (!reg.test(this.plbjForm.qzth)) {
          this.$modal.alertError("起止题号格式错误");
          return;
        }

        const arr = this.plbjForm.qzth.split("-");
        let objectivelistdata = JSON.parse(
          JSON.stringify(this.objectivelistdata)
        );
        objectivelistdata = objectivelistdata.map((item) => {
          if (item.questionNumber >= arr[0] && item.questionNumber <= arr[1]) {
            return {
              ...item,
              basicQuestionTypeId:
                this.plbjForm.basicQuestionTypeId || item.basicQuestionTypeId,
              fullScore: this.plbjForm.fullScore || item.fullScore,
              _isModified: true,
            };
          } else {
            return item;
          }
        });
        this.$emit("updateObjectivelistdata", objectivelistdata);
      } else if (this.plbjForm.gdth) {
        if (!/^\d+(\.\d)?$/.test(this.plbjForm.fullScore)) {
          this.$modal.alertError("设置满分格式错误");
          return;
        }
        const arr = this.plbjForm.gdth.split(",");
        let objectivelistdata = JSON.parse(
          JSON.stringify(this.objectivelistdata)
        );
        objectivelistdata = objectivelistdata.map((item) => {
          if (arr.includes(item.questionNumber.toString())) {
            return {
              ...item,
              basicQuestionTypeId:
                this.plbjForm.basicQuestionTypeId || item.basicQuestionTypeId,
              fullScore: this.plbjForm.fullScore || item.fullScore,
              _isModified: true,
            };
          } else {
            return item;
          }
        });
        this.$emit("updateObjectivelistdata", objectivelistdata);
      }
    },
  },
};
</script>

<style scoped>
.objsubMain {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
}
.objsubContent {
  box-sizing: border-box;
  height: 700px;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.objsubContent h3 {
  font-size: 18px;
  font-weight: normal;
}
.plbj {
  width: 300px;
  padding-right: 24px;
  box-sizing: border-box;
}
.objsubattention {
  display: flex;
  font-size: 14px;
  color: #619cf5;
  padding: 10px 0 24px;
}

.gundongtiaotable {
  width: 1040px;
}

.gundongtiaotable::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-thumb {
  background: #619cf5;
  border-radius: 10px;
}
.nrlist {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.nrlist span {
  display: inline-block;
  padding-right: 15px;
  width: 80px;
}
.nrlis >>> .el-input {
  width: 195px;
}
.nrlist >>> .el-input__inner {
  width: 195px;
}
.nrlist:first-child >>> .el-input {
  width: 90px;
}
.nrlist:first-child >>> .el-input__inner {
  width: 90px;
}
.nrlist:first-child b {
  font-style: normal;
  padding: 0 6px;
  font-weight: normal;
}
.nrlist1 b {
  display: block;
  font-weight: normal;
  padding-bottom: 15px;
}
.nrlist1 >>> .el-checkbox-group {
  margin-bottom: 20px;
}
.addquestionbox {
  width: 278px;
  background: #1a48db;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 16px;
  border: none;
}
.addquestionstbutton {
  margin-top: 20px;
  display: flex;
  padding-right: 20px;
}
.addquestionstbutton >>> .el-button {
  width: 130px;
  line-height: 30px;
  font-size: 16px;
  border: none;
}
.addquestionstbutton >>> .el-button {
  background: #1a48db;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.addquestionstbutton >>> .el-button:last-child {
  background: rgba(26, 72, 219, 0.1);
  text-align: center;
  line-height: 30px;
  color: #1a48db;
}
.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.5);
  border-radius: 4px;
  border-right: none;
  border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table >>> .el-table__header-wrapper th {
  background-color: #e8f0fa;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal;
}

.custom-table >>> .el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #d8e4f0;
}

.el-table .el-table__cell {
  padding: 8px 0;
}
.fxwidth {
  font-size: 14px;
  color: #2a303b;
}

.fxwidth >>> .el-input__inner {
  width: 130px;
  height: 30px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 0;
  text-align: center;
}
.fxwidth1 {
  font-size: 14px;
  color: #2a303b;
}

.fxwidth1 >>> .el-input__inner {
  box-sizing: border-box;
  width: 200px;
  height: 30px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 0;
  text-align: left;
  padding-left: 10px;
}
.fxwidth2 {
  font-size: 14px;
  color: #2a303b;
}

.fxwidth2 >>> .el-input__inner {
  box-sizing: border-box;
  width: 281px;
  height: 30px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 0;
  text-align: left;
  padding-left: 10px;
}
.fxwidth3 {
  font-size: 14px;
  color: #2a303b;
}

.fxwidth3 >>> .el-input__inner {
  box-sizing: border-box;
  width: 35px;
  height: 30px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 0;
  text-align: center;
}
.fxwidth4 {
  font-size: 14px;
  color: #2a303b;
}

.fxwidth4 >>> .el-input__inner {
  box-sizing: border-box;
  width: 80px;
  height: 30px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 0;
  text-align: left;
  padding-left: 10px;
}
.fxwidth4 >>> .el-input__icon {
  line-height: 30px;
}
</style>